<!-- 门类报表 -->
<template>
  <div class="tab5">
    <!-- 按纽栏组件 -->
    <div class="button-group">
      <a-button type="primary" icon="plus" @click="clickButton('add')" class="icon-button">新增</a-button>
      <a-button icon="edit" @click="clickButton('edit')" class="icon-button">编辑</a-button>
      <a-button icon="delete" @click="clickButton('del')" class="icon-button">删除</a-button>
    </div>
    <!-- 门类报表表格 -->
    <el-table
      :data="tab5TableData"
      highlight-current-row
      border
      height="calc(100% - 42px)"
      :row-style="{height:'40px'}"
      :cell-style="{padding:'0px'}"
      :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
      style="width: 100%">
      <slot v-for="(item,index) in tab5Columns">
        <el-table-column
          v-if="item.field!=='RM_Enabled'"
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width"
          show-overflow-tooltip
          sortable>
        </el-table-column>
        <el-table-column
          v-if="item.field==='RM_Enabled'"
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width">
          <template slot-scope="scope">
            <a-checkbox :checked="scope.row.RM_Enabled"></a-checkbox>
          </template>
        </el-table-column>
      </slot>
    </el-table>

    <!-- 门类报表弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalBRMTitle"
      v-model="dialogBRMVisible"
      @ok="handleOk"
      width="50%">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item label="模板文件">
              <a-upload name="file" :fileList="fileList">
                <a-button>
                  <a-icon type="upload" /> 选择文件
                </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否有效">
              <a-checkbox v-decorator="[ 'RM_Enabled', { valuePropName: 'checked', initialValue: true } ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="报表名称">
              <a-input v-decorator="[ 'RM_FileName' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="顺序号">
              <a-input type="number" v-decorator="[ 'RM_Index' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="每页行数">
              <a-input type="number" v-decorator="[ 'Rows' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="每页列数">
              <a-input type="number" v-decorator="[ 'Columns' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否分页">
              <a-checkbox v-decorator="[ 'IsPaging', { valuePropName: 'checked', initialValue: true } ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="空行补齐">
              <a-checkbox v-decorator="[ 'IsBlankLine', { valuePropName: 'checked', initialValue: true } ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="遍历顺序">
              <a-select v-decorator="[ 'Orientation' ]">
                <a-select-option v-for="(item, index) in typeSelect1" :key="index" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="数据源">
              <a-select v-decorator="[ 'DataSource' ]">
                <a-select-option v-for="(item, index) in typeSelect2" :key="index" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="OrderBy">
              <a-input v-decorator="[ 'OrderBy' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="SQL">
              <a-input v-decorator="[ 'SQL' ]" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      tab5TableData: [
        {
          RM_Index: '1',
          RM_FileName: '卷内批量导出',
          RM_FileTime: '2020-06-24',
          RM_Enabled: true,
          RM_FileSize: '139264',
          RM_Config: '{"Columns":1,"Rows":1,"IsBlankLine":0,"IsPaging":0,"DataSource":"文件数据","OrderBy":"","Orientation":"Vertical","SQL":""}'
        },
        {
          RM_Index: '2',
          RM_FileName: '全引目录',
          RM_FileTime: '2020-06-24',
          RM_Enabled: true,
          RM_FileSize: '93696',
          RM_Config: '{"Columns":1,"Rows":1,"IsBlankLine":0,"IsPaging":0,"DataSource":"文件数据","OrderBy":"","Orientation":"Vertical","SQL":""}'
        },
        {
          RM_Index: '3',
          RM_FileName: '案卷专题目录',
          RM_FileTime: '2020-06-24',
          RM_Enabled: true,
          RM_FileSize: '22016',
          RM_Config: '{"Columns":1,"Rows":1,"IsBlankLine":0,"IsPaging":0,"DataSource":"案卷数据","OrderBy":"","Orientation":"Vertical","SQL":""}'
        },
        {
          RM_Index: '4',
          RM_FileName: '案卷批量导出',
          RM_FileTime: '2020-06-24',
          RM_Enabled: true,
          RM_FileSize: '139776',
          RM_Config: '{"Columns":1,"Rows":1,"IsBlankLine":0,"IsPaging":0,"DataSource":"案卷数据","OrderBy":"","Orientation":"Vertical","SQL":""}'
        }
      ],
      tab5Columns: [
        {
          title: '顺序号',
          field: 'RM_Index',
          width: 150
        },
        {
          title: '报表名称',
          field: 'RM_FileName',
          width: 150
        },
        {
          title: '日期',
          field: 'RM_FileTime',
          width: 150
        },
        {
          title: '是否有效',
          field: 'RM_Enabled',
          width: 150
        },
        {
          title: '文件大小',
          field: 'RM_FileSize',
          width: 150
        },
        {
          title: '参数',
          field: 'RM_Config'
        }
      ],
      modalBRMTitle: '',
      dialogBRMVisible: false,
      form: this.$form.createForm(this),
      typeSelect1: [
        {
          value: '1',
          label: 'Horizontal'
        },
        {
          value: '2',
          label: 'Vertical'
        }
      ],
      typeSelect2: [
        { value: '1', label: '案卷数据' },
        { value: '2', label: '文件数据' },
        { value: '3', label: '附件数据' },
        { value: '4', label: '全文数据' },
        { value: '5', label: '分类目录' },
        { value: '6', label: '其他' }
      ],
      fileList: []
    }
  },
  created () {},
  mounted () {},
  methods: {
    clickButton (val) {
      switch (val) {
        case 'add':
          this.modalBRMTitle = '新增报表'
          this.dialogBRMVisible = true
          break
        case 'edit':
          this.modalBRMTitle = '编辑报表'
          this.dialogBRMVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    handleOk () {}
  }
}
</script>

<style lang="less" scoped>
.tab5 {
  height: 100%;
  padding: 15px;
  .button-group {
    margin-bottom: 10px;
  }
}
</style>
